<template>
	<!-- 管理后台首页 -->
	<div >
		<MyNavbar title="商家管理后台" :autoBack="false"/>
		<u-notice-bar text="更多功能有待开发中..." />
		
		<!-- 切换当前查看的统计对象 -->
		<div  style="background-color: #FFFFFF;margin: 24rpx;padding: 24rpx;" class="flex flex-center">
			<div v-if="currentShop"> 
				<div >当前店铺：{{currentShop.shopName}}</div>
				<text >当前用户：{{userInfo.nickname}}</text>
			</div>
			<u-button 
				style="width: 200rpx;display: inline-block;" type="primary" 
				@click="showShopList=true" text="切换" size="mini">
			</u-button>
		</div>
		<u-picker 
			:show="showShopList" :columns="[shopList]" @close="showShopList=false" @cancel="showShopList=false"
			@confirm="onConfirmShop" title="切换店铺" keyName="shopName" closeOnClickOverlay
			>
		</u-picker>
		
		
		<!-- 简单报表 -->
		<div style="background-color: #FFFFFF;margin: 24rpx;">
			<u-cell title="营业统计"  is-link></u-cell>
			<u-grid
				style="padding: 12rpx 0;"
				:border="false"
				col="2"
			>
				<u-grid-item  class="grid-item">
					<div style="color: red;">
						￥<u-count-to color="red" bold :startVal="0" :endVal="544"></u-count-to>
					</div>
					<div>今日收入</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div >
						<u-count-to bold :startVal="0" :endVal="12"></u-count-to>
					</div>
					<div>今日接单</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div style="color: red;">
						￥<u-count-to color="red" bold :startVal="0" :endVal="15544"></u-count-to>
					</div>
					<div>本月收入</div>
				</u-grid-item>
				<u-grid-item  class="grid-item">
					<div >
						<u-count-to bold :startVal="0" :endVal="304"></u-count-to>
					</div>
					<div>本月接单</div>
				</u-grid-item>
			</u-grid>
		</div>
		
		<!-- 功能宫格 -->
		<u-grid
			style="padding: 12rpx 0; margin: 24rpx;background-color: #FFFFFF;"
			:border="true"
			col="2"
		>
			<u-grid-item class="grid-item" @click="doScanCode()">
				<u-icon 
					name="scan"
					size="100rpx"
					:customStyle="{paddingBottom:6+'rpx'}"
				/>
				<div>扫码核销</div>
			</u-grid-item>
			<u-grid-item  class="grid-item">
				<u-icon
					name="order"
					size="100rpx"
					:customStyle="{paddingBottom:6+'rpx'}"
				/>
				<div>订单记录</div>
			</u-grid-item>
			<u-grid-item  class="grid-item">
				<u-icon
					name="list"
					size="100rpx"
					:customStyle="{paddingBottom:6+'rpx'}"
				/>
				<div>核销记录</div>
			</u-grid-item>
			<u-grid-item  class="grid-item">
				<u-icon
					name="chat"
					size="100rpx"
					:customStyle="{paddingBottom:6+'rpx'}"
				/>
				<div>消息</div>
			</u-grid-item>
		</u-grid>
		
		
		<!-- 管理菜单功能 判断是否拥有管理权限 -->
		<AdminNavMenu />
		
		
		<!-- 页尾 -->
		<PageFooter></PageFooter>
		
		<AdminTabbar active="home"/>
	</div>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	
	import AdminTabbar from '@/admin/components/layout/AdminTabbar.vue';
	import AdminNavMenu from '@/admin/components/AdminNavMenu.vue';
	
	
	
	export default {
		components: {
			AdminTabbar, AdminNavMenu
		},
		data() {
			return {
				// 可选店铺列表
				shopList: [],
				// 显示店铺选择
				showShopList: false,
			}
		},
		computed: {
			...mapState('user', {
				userInfo: 'userInfo',
			}),
			...mapState('admin', {
				currentShopUid: 'currentShopUid',
				currentShop: 'currentShop',
			}),
		},
		//  触发下拉刷新
		onPullDownRefresh(){
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		mounted(){
			this.initShop();
		},
		methods: {
			...mapMutations('admin', {
				setCurrentShop: 'setCurrentShop',
			}),
			// 初始化当前店铺
			initShop(){
				this.$api.shop.myShopList().then(({data}) => {
					if (data && data.length > 0) {
						this.shopList = data;
						this.setCurrentShop(data[0]);
					} else {
						this.$utils.showToast('暂无店铺');
					}
				});
			},
			// 切换店铺确定时
			onConfirmShop(value){
				console.log("切换店铺确定时 value: ", value);
				this.showShopList = false;
				let shop = value.value[0];
				this.setCurrentShop(shop);
			},
			// 打开二维码扫描
			doScanCode(){
				// h5不支持
				uni.scanCode({
					scanType: ["qrCode", "barCode", "datamatrix", "pdf417"],
					/**
					 * res返回: { 
						 result: 所扫码的内容 
						 scanType: 所扫码的类型	
						 charSet: 所扫码的字符集
						 path: 当所扫的码为当前应用的合法二维码时，会返回此字段，内容为二维码携带的 path
					}
					 */
					success: (res)=>{
						console.log("扫码返回：", res);
						this.$utils.showToast('开发中开发中...');
					},
					fail: (e)=>{
						console.error("扫码错误：", e);
					}
				});
			},
		}
	}
	
</script>

<style scoped>
	.grid-item{
		padding: 24rpx 0;
	}
	
	
</style>
